<template>
	<div class="active">
        <div class="manzhan">
            <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div>
            <img :src="`/api${goodsList.bgUrl}`" style="width:100% ;height:300px;">
            <h4 style="font-size: 23px; margin-top: 5px;">{{goodsList.detailaddress}}</h4>
            <span style="font-size: 20px; margin-top: 5px; font-weight:bold;color:red;">{{goodsList.nowPrice}}</span><br>
            <span style="font-size: 20px; margin-top: 5px; margin-left:20px; color:hotpink;">{{goodsList.prePrice}}</span><br>
            <span style="font-size: 18px; margin-top: 5px; font-weight: bold;">{{goodsList.name}}</span>
            <p style="font-size: 18px; margin-top: 5px; ">{{goodsList.time}}</p>
            <span style="font-size: 16px; margin-top: 5px; ">{{goodsList.detailDate}}</span><br>
            <span style="font-size:20px; margin-top: 5px; font-weight:bold;color:red ;">{{goodsList.detailTimes}}</span>
            <p style="font-size: 23; margin-top: 5px; font-weight:bold;">{{goodsList.detailChild}}</p>
            <p style="font-size: 18px; margin-top: 5px; font-weight: bold;">{{goodsList.detailInRemark}}</p>
            <p style="font-size: 18px ;margin-top: 5px; font-weight: bold;">{{goodsList.detailOutRemark}}</p>
        </div>
        <div style="width:100% ;height:200px; background-color:#fff;" ></div>
    <van-submit-bar  button-text="加入购物车" @submit="addCart(goodsList)" />
    <div class="return" @click="bindUss"><span class="iconfont icon-gouwuche"></span></div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { RequestCOSAPI } from '../../api/goods'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {useRouter} from 'vue-router'
import { useCounterStore } from '../../stores/users'
import { Toast } from 'vant'
import Ajax from '../../api/axios'

const store = useCounterStore()
const onClickLeft = () => history.back()
const goodsList = ref([])
const onSubmit = () => Toast('点击按钮');
const route = useRoute()
const router =useRouter()
// const mobileDescImg = ref([])

async function bindss() {
	const res = await RequestCOSAPI(route.query.id)
	if (res.code === 200) {
		goodsList.value = res.data
		console.log(goodsList.value)
	}
}
function bindUss(){
    router.push('/cart')
}
function addCart(goodsList) {
	Ajax({
		url: '/cart/add',
		method: 'POST',
		data: {
            "userId": store.userInfo.id,
            "price":goodsList.nowPrice,
            "id": goodsList.id,
            "time": Date.now(),
            "count": 1,
            "name": goodsList.name,
            "detailaddress": "待支付",
            "bgUrl": goodsList.bgUrl
        }
	}).then(d => {
		console.log(d.code)
		if (d.code === 200) {
			Toast.success('添加成功')
		} else {
			Toast.fail('添加失败')
		}
	})
}
onMounted(() => {
	bindss()
})
</script>

<style lang="scss" scoped>
.manzhan{
    position: sticky;
       top: 0;
       z-index: 9;
}
.active{
    
}
.return{
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 30px;
    z-index:999;
    width: 45px;
	height: 45px;
    span{
        font-size: 30px;
        color: red;
    }
}
</style>
